<!-- 柱形图 -->
<script setup>
import { ref, onMounted } from "vue"
import * as echarts from "echarts"

// 创建一个对 DOM 容器的引用
const barChartRef = ref(null)

// 定义 ECharts 的配置项，设置文本颜色为白色，并将内边距设为0
const option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    data: ["文本1", "文本2"],

    top: "2%",
    textStyle: {
      color: "rgba(255,255,255,.5)",
      fontSize: "12",
    },
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 35,
  },
  grid: {
    left: "0%",
    top: "40px",
    right: "0%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"],
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1)",
          width: 1,
          type: "solid",
        },
      },

      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        // rotate:50,
        show: true,
        splitNumber: 15,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "14",
        },
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        //formatter: '{value} %'
        show: true,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "14",
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1	)",
          width: 1,
          type: "solid",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
    },
  ],
  series: [
    {
      name: "文本1",
      type: "bar",
      data: [2, 3, 3, 9, 15, 12, 6, 4, 6],
      barWidth: "20%", //柱子宽度
      // barGap: 1, //柱子之间间距
      itemStyle: {
        normal: {
          color: "#2f89cf",
          opacity: 1,
          barBorderRadius: 5,
        },
      },
    },
    {
      name: "文本2",
      type: "bar",
      data: [1, 4, 5, 11, 12, 9, 5, 6, 5],
      barWidth: "20%",
      // barGap: 1,
      itemStyle: {
        normal: {
          color: "#62c98d",
          opacity: 1,
          barBorderRadius: 5,
        },
      },
    },
  ],
}

// 在组件挂载时初始化 ECharts
onMounted(() => {
  const chart = echarts.init(barChartRef.value) // 初始化 ECharts 实例
  chart.setOption(option) // 应用配置

  // 窗口大小变化时自适应
  window.addEventListener("resize", () => {
    chart.resize()
  })
})
</script>

<template>
  <div class="line-chart">
    <div class="chart-header">
      <h2>柱形图</h2>
    </div>
    <div class="chart-body">
      <div ref="barChartRef" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.line-chart {
  height: 100%;
  width: 100%;

  .chart-header {
    height: 15%;
    border-bottom: 1px solid rgba(7, 118, 181, 0.7);
    font-weight: 500;
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    &::after {
      width: 100%;
      height: 1px;
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      background: linear-gradient(to right, #076ead, #4ba6e0, #076ead);
      box-shadow: 0 0 5px rgba(131, 189, 227, 1);
      opacity: 0.6;
    }

    &::before {
      position: absolute;
      content: "";
      width: 6px;
      height: 6px;
      background: rgba(22, 214, 255, 0.9);
      box-shadow: 0 0 5px rgba(22, 214, 255, 0.9);
      border-radius: 10px;
      left: 10px;
      top: 50%;
      transform: translate(0, -50%);
    }

    h2 {
      font-weight: 500;
      font-size: 16px;
      margin-left: 30px;
    }
  }

  .chart-body {
    height: 85%;
    padding: 0 10px 10px;
  }
}
</style>
